<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport"
		  content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
	<meta name="format-detection" content="telephone=no">
	<title>LayIM 移动版</title>


	<style>
		/*        .layui-layim-tab li {
                    width: 100%
                }
                .layim-list-top li[layim-event="newFriend"] {
                    display: none;
                }*/
	</style>

	<link rel="stylesheet" href="../../src/css/layui.mobile.css">
	<link rel="stylesheet" href="../../src/css/layui.css">

	<script src='hxsdk/webim.config.js'></script>
	<script src='hxsdk/strophe-1.2.8.min.js'></script>
	<script src='hxsdk/websdk-1.4.13.js'></script>
	<script src="../../src/layui.js"></script>
	<script src="../../src/lay/jquery-1.11.1.min.js"></script>


</head>
<body>



<script>
    var loginUser; // 全局的 登录帐号
    //全局环信链接，方便layim-mobile内部使用
    var easemobConn;
    var layim;
    //默认头像图片
    var friendAvatar = "images/avatar.jpg";
    var groupAvatar = "images/group.jpg";
    layui.config({
        version: true
    }).use('mobile', function () {
        var mobile = layui.mobile
            , layer = mobile.layer;
        layim = mobile.layim;


        var name ,pwd;
        name = prompt("Please enter your name", "");
        loginUser = name;
        pwd = name;
        //好友列表
        var friends = [{"groupname": "联系人", "id": 1, "list": []}];
        //环信用户信息 缓存信息
        var options = {
            apiUrl: WebIM.config.apiURL,
            user: name,
            pwd: pwd,
            appKey: WebIM.config.appkey
        };


        //环信链接配置
        easemobConn = new WebIM.connection({
            isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
            https: typeof WebIM.config.https === 'boolean' ? WebIM.config.https : location.protocol === 'https:',
            url: WebIM.config.xmppURL,
            heartBeatWait: WebIM.config.heartBeatWait,
            autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
            autoReconnectInterval: WebIM.config.autoReconnectInterval,
            apiUrl: WebIM.config.apiURL,
            isAutoLogin: true
        });

        //环信监听
        easemobConn.listen({
            onOpened: function (message) {          //连接成功回调
                //好友信息
                easemobConn.getRoster({
                    success: function (roster) {
                        for (var i = 0, l = roster.length; i < l; i++) {
                            var ros = roster[i];
                            if (ros.subscription === 'both' || ros.subscription === 'to') {
                                layim.addList({
                                    type: 'friend',
                                    username: ros.name,
                                    id: ros.name,
                                    groupid: 1,
                                    avatar: friendAvatar
                                });
                            }
                        }
                    }
                });
                //所有群组
                easemobConn.getGroup({
                    success: function (resp) {
                        for (g of resp.data) {
                            layim.addList({
                                type: 'group' //列表类型，只支持friend和group两种
                                , avatar: groupAvatar //群组头像
                                , groupname: g.groupname //群组名称
                                , id: g.groupid //群组id
                            })
                        }
                    }
                });
            },
            onClosed: function (message) {
            },         //连接关闭回调
            onTextMessage: function (message) {
                receivedMsg(message);
            }
            ,    //收到文本消息
            onEmojiMessage: function (message) {
            }
            ,   //收到表情消息
            onPictureMessage: function (message) {
                receivedMsg(message);
            }
            , //收到图片消息
            onCmdMessage: function (message) {
            }
            ,     //收到命令消息
            onAudioMessage: function (message) {
            }
            ,   //收到音频消息
            onLocationMessage: function (message) {
            }
            ,//收到位置消息
            onFileMessage: function (message) {
                receivedMsg(message);
            }
            ,    //收到文件消息
            onVideoMessage: function (message) {
                var node = document.getElementById('privateVideo');
                var option = {
                    url: message.url,
                    headers: {
                        'Accept': 'audio/mp4'
                    },
                    onFileDownloadComplete: function (response) {
                        var objectURL = WebIM.utils.parseDownloadResponse.call(easemobConn, response);
                        node.src = objectURL;
                    },
                    onFileDownloadError: function () {
                        console.log('File down load error.')
                    }
                };
                WebIM.utils.download.call(easemobConn, option);
            }
            ,   //收到视频消息
            onPresence: function (message) {//处理“广播”或“发布-订阅”消息，如联系人订阅请求、处理群组、聊天室被踢解散等消息
                console.log("处理“广播”或“发布");
                console.log(message);
				solveOnPresence(message);
            }
            ,
            onRoster: function (message) {  //处理好友申请
                console.log("处理好友申请");
                console.log(message);
                solveOnRoster(message);
            }
            ,
            onInviteMessage: function (message) {//处理群组邀请
                console.log("处理群组邀请");
                console.log(message);
                solveOnInviteMessage(message);
            }
            ,
            onOnline: function () {
            }
            ,                  //本机网络连接成功
            onOffline: function () {
            }
            ,                 //本机网络掉线
            onError: function (message) {
            }
            ,          //失败回调
            onBlacklistUpdate: function (list) {       //黑名单变动
                // 查询黑名单，将好友拉黑，将好友从黑名单移除都会回调这个函数，list则是黑名单现有的所有好友信息
                console.log(list);
            }
            ,
            onReceivedMessage: function (message) {
            }
            ,    //收到消息送达服务器回执
            onDeliveredMessage: function (message) {
            }
            ,   //收到消息送达客户端回执
            onReadMessage: function (message) {
            }
            ,        //收到消息已读回执
            onCreateGroup: function (message) {
            }
            ,        //创建群组成功回执（需调用createGroupNew）
            onMutedMessage: function (message) {
            }        //如果用户在A群组被禁言，在A群发消息会走这个回调并且消息不会传递给群其它成员
        });

        var receivedMsg = function (message) {
            if (options.user == message.from) return;//防止发送群消息时，会再次给直接发送一条
            //创建一个会话
            var isGroupChat = message.type == "groupchat";
            layim.getMessage({
                username: message.from //消息来源用户名
                , avatar: friendAvatar //消息来源用户头像
                , id: isGroupChat ? message.to : message.from //消息的来源ID（如果是私聊，则是用户id，如果是群聊，则是群组id）
                , type: isGroupChat ? "group" : "friend"  //聊天窗口来源类型，从发送消息传递的to里面获取
                , content: message.data //消息内容
                // ,cid: 0 //消息id，可不传。除非你要对消息进行一些操作（如撤回）
                , mine: false //是否我发送的消息，如果为true，则会显示在右方
                // ,fromid: "100000" //消息的发送者id（比如群组中的某个消息发送者），可用于自动解决浏览器多窗口时的一些问题
                , timestamp: new Date().getTime() //服务端时间戳毫秒数。注意：如果你返回的是标准的 unix 时间戳，记得要 *1000
            });
        }
        //环信单聊发送文本消息
        var sendPrivateText = function (isGroupChat, to, message) {
            var id = easemobConn.getUniqueId();                 // 生成本地消息id
            var msg = new WebIM.message('txt', id);      // 创建文本消息
            msg.set({
                msg: message,                  // 消息内容
                to: to,                          // 接收消息对象（用户id）
                roomType: false,
                chatType: 'chatRoom',
                success: function (id, serverMsgId) {
                    console.log('send private text Success');
                },
                fail: function (e) {
                    console.log("Send private text error");
                }
            });
            if (isGroupChat) {
                msg.setGroup('groupchat');
            } else {
                msg.body.chatType = 'singleChat';
            }
            easemobConn.send(msg.body);
        };


        layim.on('sendMessage', function (res) {
            var mine = res.mine; //包含我发送的消息及我的信息
            var to = res.to; //对方的信息
            var isGroupChat = to.type == "group";
            sendPrivateText(isGroupChat, isGroupChat ? to.id : to.name, mine.content);
        });


        layim.config({
            init: {
                //我的信息
                mine: {
                    "username": options.user //我的昵称
                    , "id": options.user //我的ID
                    , "avatar": friendAvatar //我的头像
                }
                //我的好友列表
                , friend: friends
            }, easemobImage: {
                url: ''
            }, easemobFile: {
                url: ''
            }
            //,tabIndex: 1 //用户设定初始打开的Tab项下标
            //,isNewFriend: false //是否开启“新的朋友”
            , isgroup: true //是否开启“群聊”
            //,chatTitleColor: '#c00' //顶部Bar颜色
            , title: '聊天' //应用名，默认：我的IM
        });

        //查看群的信息
        layim.on('detail', function (data) {
            var username = layim.cache().mine.username;
            var pageNum = 1,
                pageSize = 1000;
            var options = {
                pageNum: pageNum,
                pageSize: pageSize,
                groupId: data.id,
                success: function (resp) {
                    var isOwner = false;
                    for (member of resp.data) {
                        isOwner = username == member.owner;
                    }


                    var groupDescription ;//群描述
                    var groupInfoOptions01 = {
                        groupId: data.id,//群 ID
                        success: function (resp01) {
                            groupDescription = resp01.data[0].description;


                            var detailTitle = data.groupname + '<i onclick="moreGroupInfo(\''+data.id+'\',\''+isOwner+'\')" class="layui-icon layim-chat-back" style="float: right;" >&#xe65f;</i>' ;
                            layim.panel({
                                title: detailTitle
                                , tpl: '<ul class="layim-list-top" id="addUserFromGroupUl">\n' +
                                '<li>群ID：'+data.id+'</li>'+
                                '<li>群描述：'+groupDescription+'</li>'+
                                (isOwner ? '<li  onclick="addUserFromGroup(\''+data.id+'\')"><i  class="layui-icon">&#xe654;</i>添加成员</li>' : '') +
                                '{{# layui.each(d.data, function(index, item){ }}\n' +
                                '  <li id="{{item.member||item.owner}}">\n' +
                                '  <i style="font-size: 35px;" class="layui-icon">&#xe612;</i>' +
                                '<span>{{item.member||item.owner}}</span>' +

                                (isOwner ? '<button onclick="removeUserFromGroup(\'{{item.member||item.owner}}\',\''+data.id+'\')" class="layui-btn layui-btn-danger" style="float: right;margin: 2px;">移 除</button>':'')  +

                                '  </li>\n' +
                                '{{#  }); }}\n' +
                                '</ul>'  //模版，基于laytpl语法
                                , data: resp.data
                            });
                            //找到新生成的button是群主的，把退群操作 去掉
                            var displayOwner = $("#addUserFromGroupUl #"+username+" button");
                            if(displayOwner){
                                displayOwner.remove();
                            }

                        }
                    };
                    easemobConn.getGroupInfo(groupInfoOptions01);

                },
            };
            easemobConn.listGroupMember(options);
        });

        //环信登陆链接
        easemobConn.open(options);
    });
</script>


<script>
    //以下是 添加 好友 和 群组的js

    var layer;// 全局使用 上面定义的非全局 无法使用
    layui.use('layer', function () {
        layer = layui.layer;
    });

    /**********************   好友添加开始  ************************/

    //点击 添加好友 javascript的方式appendChild反映过慢，需要用jquery的append方式
    function appendAddNewFriend() {
        var appendHtmlflag = document.getElementById("searchUserInput");
        if (!appendHtmlflag) {//说明是第一次点击
            var appendHtml = "<div class='layui-form-item' style='margin: 10px;'>" +
                "<label class='layui-form-label'>用户：</label>" +
                "<div class='layui-input-block'><input id='searchUserInput' class='layui-input'  style='margin: 5px;'/></div>" +
                "<label class='layui-form-label'>验证信息：</label>" +
                "<div class='layui-input-block'><input id='searchUserMeaage'  class='layui-input' style='margin: 5px;' /></div>" +
                "<button class='layui-btn layui-btn-normal' style='margin: 5px;float: right;' onclick='addNewFriendUser()'>添加</button>" +
                "</div>";
            $("#addNewFriend").append(appendHtml);
        } else {//第二次点击 实现折叠效果
            $("#addNewFriend").html("");
        }
    }

    function addNewFriendUser() { //点击 添加好友
        var searchUserInput = document.getElementById("searchUserInput").value;//用户
        var searchUserMeaage = document.getElementById("searchUserMeaage").value;//验证信息
        if (searchUserInput) {//有值
            if (searchUserInput.trim().length > 0) {//不是空格
                var msg = "添加好友";
                if (searchUserMeaage) {
                    if (searchUserMeaage.length > 15) {
                        layer.msg('验证信息不能超过15个字！');
                        return;
                    }
                    msg = searchUserMeaage;
                }
                easemobConn.subscribe({
                    to: searchUserInput,
                    message: msg//添加好友的验证信息
                });
                layer.msg('好友请求已经发出！');
            } else {
                layer.msg('请输入要添加的好友！');
            }
        } else {
            layer.msg('请输入要添加的好友！');
        }

    }

    function solveOnRoster(message) {//当发出请求的时候
        var msg = message[0];

        if (!msg.ask)
            switch (msg.subscription) {
                case "to"://添加好友
                    layim.addList({
                        type: 'friend',
                        username: msg.name,
                        id: msg.name,
                        groupid: 1
                    });
                    break;
                case "remove"://移除好友
                    layim.removeList({
                        type: 'friend' //或者group
                        , id: msg.name //好友或者群组ID
                    });
                    break;
                case "none":
                    layer.alert(msg.name+"拒绝了你的好友添加申请！",{icon: 5});
                    break;
            }

    }

    //同意添加好友
    function agreeAddUser(fromUser) {
        easemobConn.subscribed({
            to: fromUser,
            message: '[resp:true]'
        });
        easemobConn.subscribe({//需要反向添加对方好友
            to: fromUser,
            message: '[resp:true]'
        });
        layer.closeAll();
    }

    //拒绝添加好友

    function refuseAddUser(fromUser) { // layui 弹出框 和 拒绝添加好友的请求 排斥 的解决方法 只能 分开两个方法
        layer.closeAll();
        layer.alert('你拒绝了' + fromUser + '的添加好友请求！', {icon: 5});
        easemobConn.unsubscribed({
            to: fromUser,
            message: 'rejectAddFriend'
        });
    }

    /*********当接收到添加好友 、 收到群通知 、等等的处理方法*****/
    function solveOnPresence(message) {
        /* 当收到		添加好友	的请求的时候 */
        if (message.type == "subscribe") {//处理添加自己为好友的请求
            var fromUser = message.from;//请求人
            var status = message.status;//[resp:true]的时候为同意好友添加
            if (status == "[resp:true]") {//说明是添加好友后，对方同意后反向添加自己为好友
                easemobConn.subscribed({
                    to: fromUser,
                    message: '[resp:true]'
                });
                layer.alert('你和' + fromUser + '已经是好友了！', {icon: 1});
            } else {
                var tips = fromUser + "请求添加你为好友，是否同意?";
                var htmlContent = '<div style="">' +
                    '<br/><p style="color: #007DDB;">验证信息：<span style="color: black;">' + status + '</span></p><br/><hr/>' +
                    '<button class="layui-btn layui-btn-normal" style="float: right;margin: 10px;" onclick="agreeAddUser(\'' + fromUser + '\')" >同意</button>' +
                    '<button class="layui-btn layui-btn-danger" style="float: right;margin: 10px;" onclick="refuseAddUser(\'' + fromUser + '\');">拒绝</button>' +
                    '</div>';
                layer.open({
                    type: 1,
                    title: tips,
                    content: htmlContent
                });
            }
        } else if (message.type == "memberJoinPublicGroupSuccess") {//有人加入 公共群 自己是管理员 通知消息
            //查询 群信息 多个人 同时加入 是 一条一条 的 推送的
            var gid = message.from;
            var groupInfoOptions = {
                groupId: gid,//群 ID
                success: function (resp) {
                    console.log(groupInfo);
                    var groupInfo = resp.data[0];
                    var joinUser = message.mid;
                    layer.alert("<span style='color: red;'>" + joinUser + "</span> 加入了群：<span style='color: blue;'>" + groupInfo.name + "</span>", {icon: 1});
                }
            };
            easemobConn.getGroupInfo(groupInfoOptions);

        } else if (message.type == "unavailable" && message.original_type == "unavailable") {//退群操作
            //提示
            var gid = message.from;
            var groupInfoOptions = {
                groupId: gid,//群 ID
                success: function (resp) {
                    var groupInfoName = resp.data[0].name;
                    var exitUser = message.fromJid;//退群人
                    exitUser = exitUser.substring(exitUser.lastIndexOf("/") + 1, exitUser.length);
                    if (exitUser == loginUser) {//当前登录人 退出群 的消息
                        exitUser = "你";
                    }
                    var tips = "<span style='color: red;'>" + exitUser + "</span>退出了群：<span style='color: blue;'>" + groupInfoName + "</span>";
                    layer.alert(tips, {icon: 5});
                }
            };
            easemobConn.getGroupInfo(groupInfoOptions);
        }else if(message.type == "joinGroupNotifications"){//群管理人员 收到 加入群 操作 该 消息只 推送 一次 不做处理默认为 拒绝
			var applyUser = message.from;//申请人
			var groupId = message.gid; //群 ID
			var toNick = message.toNick;//群名字
			var agreeTips = applyUser + "申请加入群："+toNick+"，是否同意?";
            layer.confirm(agreeTips, {
                btn: ['同意', '拒绝']
            }, function(index, layero){//同意
                var options001 = {
                    applicant: applyUser,
                    groupId: groupId,
                    success: function(resp){
                        console.log(resp);
                    },
                    error: function(e){}
                };
                easemobConn.agreeJoinGroup(options001);
            },function (index, layero) {//拒绝
                var options002 = {
                    applicant: applyUser,
                    groupId: groupId,
                    success: function(resp){
                        console.log(resp);
                    },
                    error: function(e){}
                };
                easemobConn.rejectJoinGroup(options002);
            });


		}else if(message.type == "joinPublicGroupDeclined"){
			//加入群被拒绝
            layer.alert("群："+message.from+"，拒绝了你的入群请求!",{icon:5});
		}else if(message.type == "joinPublicGroupSuccess"){
            layer.alert("群："+message.from+"，同意了你的入群请求!",{icon:1});
            //更新 群的 列表
            layim.removeList({
                type: 'group',  //或者group
                id: message.from //好友或者群组ID
            });
		}else if (1 == 2) {//其他 判断继续添加

        }
    }

    /**********************   好友添加结束  ************************/


    /**********************   添加群组开始  ************************/
    //点击 加入群组
    function addNewGroup() {
        var appendHtmlflag = document.getElementById("searchGroupInput");
        if (!appendHtmlflag) {//说明是第一次点击
            var appendHtml = "<div id='appendGroupHtml' class='layui-form-item' style='margin: 10px;'>" +
                "<label class='layui-form-label'>群ID：</label>" +
                "<div class='layui-input-block'><input id='searchGroupInput'  class='layui-input'  style='margin: 5px;'/></div>" +
                "<button class='layui-btn layui-btn-normal' style='margin: 5px;float: right;' onclick='searchGroup()'>搜索</button>" +
                "</div>";
            $("#addNewGroup").append(appendHtml);
        } else {//第二次点击 实现折叠效果
            $("#addNewGroup,#showGroupInfo").html("");
        }
    }

    function searchGroup() {//搜索 公开群组
        var searchGroupValue = document.getElementById("searchGroupInput").value;
        if (searchGroupValue) {
            if (searchGroupValue.trim().length > 0) {
                var groupInfoOptions = {
                    groupId: searchGroupValue,
                    success: function (resp) {
                        //console.log("Response: ", resp);
                        if (resp.data != null && resp.data.length > 0) {
                            var groupInfo = resp.data[0];
                            //清除以前的
                            var removeDom = document.getElementById("appendGroupInfoHtml");
                            if (removeDom) {//第二次点击
                                removeDom.remove();
                            }
                            var appendHtml = "<div id='appendGroupInfoHtml' class='layui-form-item' style='margin: 5px;border-top: 1px solid #E2E2E2; '>" +
                                "<h3>群信息 [ <span id='groupInfoid'>" + groupInfo.id + "</span> ]</h3>" +
                                "<label class='layui-form-label'>群名字：</label>" +
                                "<div class='layui-input-block'><input disabled='disabled'  value='" + groupInfo.name + "' class='layui-input'  style='margin: 5px;'/></div>" +
                                "<label class='layui-form-label'>描述：</label>" +
                                "<div class='layui-input-block'><input disabled='disabled'  value='" + groupInfo.description + "' class='layui-input'  style='margin: 5px;'/></div>" +
                                //"<hr/><label class='layui-form-label'>验证信息：</label>" +
                                //"<div class='layui-input-block'><input id='searchUserMeaage'  class='layui-input' style='margin: 5px;' /></div>"+
                                "<button  class='layui-btn layui-btn-normal' style='margin: 5px;float: right;' onclick='joinGroup()'>申请加入</button>"
                                + "</div>";
                            $("#showGroupInfo").append(appendHtml);
                        }
                    },
                    error: function () {//如果是非公开 群只有 管理人员 才有权限
                        var removeDom = document.getElementById("appendGroupInfoHtml");
                        if (removeDom) {//搜索不到清除以前的信息
                            removeDom.remove();
                        }
                        layer.msg('未搜到相关信息，该群可能不是公开群！');
                    }
                };
                easemobConn.getGroupInfo(groupInfoOptions);

            } else {
                layer.msg('请输入要加入的群ID！');
            }
        } else {
            layer.msg('请输入要加入的群ID！');
        }
    }

    function joinGroup() { //此方法 加入 群组 是针对 当前登录人 加入群组的
        var groupInfoid = $("#groupInfoid").text();
        if (groupInfoid) {
            var addGroupOption = {
                groupId: groupInfoid,
                success: function(resp) {
                    layer.alert('已经发出申请！', {icon: 1});
                },
                error: function(e) {
                    if(e.type == 17){
                        console.log("您已经在这个群组里了");
                    }
                }
            };
            easemobConn.joinGroup(addGroupOption);
        }
    }

    function solveOnInviteMessage(message) {//当前登陆人 收到 加入群组的处理
        var groupInfoOptions = {
            groupId: message.roomid,//群 ID
            success: function (resp) {
                if (message.type == "invite") {//加入公开群组
                    var tips = "你已加入群：<span>" + resp.data[0].name + "</span>";
                    layer.alert(tips, {icon: 1});
                    layim.addList({
                        type: 'group' ,
                        avatar: groupAvatar ,
                        groupname: resp.data[0].name ,
                        id: message.roomid
                    });
                } else if (message.type == "leaveGroup") {// 退出群
                    var tips = "你已退出群：<span>" + resp.data[0].name + "</span>";
                    layer.alert(tips, {icon: 5});
                    layim.removeList({
                        type: 'group',  //或者group
                        id: message.roomid //好友或者群组ID
                    });
                }
            }, error: function () {//非公开群，用户没有权限查询 只能 知道ID
                if (message.type == "invite") {//加入群组
                    var tips = "你已加入群：<span>" + message.roomid + "</span>";
                    layer.alert(tips, {icon: 1});
                } else if (message.type == "leaveGroup") {// 退出群
                    var tips = "你已退出群：<span>" + message.roomid + "</span>";
                    layer.alert('已经发出申请！', {icon: 5});
                }
            }
        };
        easemobConn.getGroupInfo(groupInfoOptions);
    }

    /**********************   添加群组结束  ************************/


    /************************** 创建 和 解散 群 开始**************************/
    //创建群
    function creatGroup() {
        var createGroupHtml = "<div  class='layui-form-item' style='margin: 5px;'>" +
            "<label class='layui-form-label'>群名字：</label>" +
            "<div class='layui-input-block'><input id='createGroupName' maxlength='15' class='layui-input'/></div>" +
            "<label class='layui-form-label'>描述：</label>" +
            "<div class='layui-input-block'><input id='createGroupDesc' maxlength='25' class='layui-input'/></div>" +
            "<button  class='layui-btn layui-btn-normal' style='margin: 5px;float: right;' onclick='layer.closeAll();'>取消</button>"+
            "<button  class='layui-btn layui-btn-normal' style='margin: 5px;float: right;' onclick='doCreateGroup()'>创建</button>"
            +"</div>";
        layer.open({
            title: '创建群',
            type: 1,
            closeBtn: 0,
            content: createGroupHtml
        });
    }
    function doCreateGroup() {//具体的操作
        var groupname = document.getElementById("createGroupName").value;
        var groupDesc = document.getElementById("createGroupDesc").value;
        if(!groupname){
            layer.msg("群名称不能为空！");
            return;
        }
        if(!groupDesc){
            groupDesc = "";//保证有值
        }
        layer.confirm("确定创建群："+groupname+"?", {
            btn: ['确定', '取消']
        }, function(index, layero){
            var createGroupoptions = {
                data: {
                    groupname: groupname, //群组名
                    desc: groupDesc, // 群组描述
                    members: [loginUser],//是用户名组成的数组,默认群组下 是 当前 用户
                    public: true,//是否公开
                    approval: true,//是否审批
                    allowinvites: 200 //？ 没有 给出解释
                },
                success: function (respData) {
                    layer.closeAll();
                    layer.msg("创建成功！");
                    var createGroupId = respData.data.groupid;
                    layim.addList({
                        type: 'group' ,
                        avatar: groupAvatar ,
                        groupname:groupname ,
                        id: createGroupId
                    });
                    var showInfo = '<li layim-event="chat" data-type="group" data-index="group'+createGroupId+'" class="layim-group'+createGroupId+' "><div style="position: absolute;left: 12px;top: 15px;width: 36px;height: 36px;border-radius: 100%"><i style="font-size: 30px;" class="layui-icon"></i></div><span>'+groupname+'</span><p></p><span class="layim-msg-status">new</span></li>';
                    $("#groupListDiv").append(showInfo);
                },
                error: function () {layer.msg("创建失败！");}
            };
            easemobConn.createGroupNew(createGroupoptions);
        });
    }

    //解散群 即 删除群
    function disbandGroup(groupid) {


        var dissolveGroupOption = {
            groupId: groupid,
            success: function () {
                layer.closeAll();
                layer.msg("该群租已经解散！");
                layim.removeList({
                    type: 'group',  //或者group
                    id: groupid //好友或者群组ID
                });
                //问题是怎么 回到 群列表 页面 回到主界面

                location.reload();

            }, error: function () {
                layer.msg("服务器异常，操作失败！");
            }
        };
        easemobConn.dissolveGroup(dissolveGroupOption);


    }
    /***************创建 和 解散 群 结束 ******************/



    /**********************   用户从群列表退群、管理员踢人、拉人入群 开始  ************************/
    //管理员从 群组中 踢出 人 或者 用户自己 退出群
    function removeUserFromGroup(removeuser,groupid,self) {
        var tips = "是否将"+removeuser+"移除该群？";

        if(self){ //用户自己退出群
            if(self == "jiesan"){
                tips = "确定要解散该群吗？"
            }else{
                tips = "确定要退出该群吗？"
            }
        }


        layer.confirm(tips, {
            btn: ['确定', '取消']
        }, function(index, layero){
            if(self!=null && self == "jiesan"){//解散群
                disbandGroup(groupid);
            }else{
                var optionLeave = {
                    to: removeuser,
                    roomId: groupid,
                    success: function () {
                        //更新 群列表
                        layim.removeList({
                            type: 'group',  //或者group
                            id: groupid //好友或者群组ID
                        });
                        document.getElementById(removeuser).remove();//去掉列表中的人员
                        layer.closeAll();//关闭提示
                        if(self){//自己退群 回到主界面
                            location.reload();
                        }
                    },error: function () {layer.msg('操作失败！');}
                };
                easemobConn.leaveGroupBySelf(optionLeave);
            }

        });
    }

    // 群组中 加入 人
    function addUserFromGroup(groupid) {
        var addUserHtml="<div class='layui-form-item' style='margin: 10px;'>" +
            "<label class='layui-form-label' style='text-align: center;'>用户：</label>" +
            "<div class='layui-input-block'><input id='addUserFromGroupInput' class='layui-input'  style='margin: 5px;'/></div>" +
            "<button class='layui-btn layui-btn-warm' style='margin: 5px;float: right;' onclick='layer.closeAll();'>关闭</button>" +
            "<button class='layui-btn layui-btn-normal' style='margin: 5px;float: right;' onclick='doAddUserFromGroup(\""+groupid+"\")'>添加</button>" +
            "</div>";
        layer.open({
            title: '用户入群',
            type: 1,
            closeBtn: 0,
            content: addUserHtml
        });
    }
    function doAddUserFromGroup(groupid) {//处理 群组中 加入 人
        var addUser = document.getElementById("addUserFromGroupInput").value;
        if(addUser){
            var addtips = "确定将" + addUser + "加入到该群吗？";
            var appendFlag = document.getElementById(addUser);//判断要填加的用户是否已经添加过
            if(appendFlag){
                layer.msg("该用户已经是群成员！");
                return;
            }
            layer.confirm(addtips, {
                btn: ['确定', '取消']
            }, function(index, layero){
                var option = {
                    list: [addUser],
                    roomId: groupid
                };
                //刷新当前群成员的列表
                if(!appendFlag) {//第一次刷新
                    var addUserFromGroupliHtml = '<li id="' + addUser + '"><i style="font-size: 35px;" class="layui-icon"></i><span>' + addUser + '</span><button onclick="removeUserFromGroup(\'' + addUser + '\',\'' + groupid + '\')" class="layui-btn layui-btn-danger" style="float: right;margin: 2px;">移 除</button> </li>';
                    $("#addUserFromGroupUl").append(addUserFromGroupliHtml);
                }
                easemobConn.addGroupMembers(option);
                //layer.msg("添加成功！");
                layer.closeAll();
            });
        }else{
            layer.msg("请输入要添加的用户！");
        }
    }

    function moreGroupInfo(groupid,isOwner) {//当前用户 点击 群信息 的 ... 的时候 显示 退出群 等信息

        var tips = "退出群";
        var onclickHtml = "removeUserFromGroup(\""+loginUser+"\",\""+groupid+"\",\"self\")";
        if(isOwner.indexOf("false")==-1){
            onclickHtml =  "removeUserFromGroup(\""+loginUser+"\",\""+groupid+"\",\"jiesan\")";//解散群
            tips = "解散群";
        }
        var openHtml = "<div class='layui-anim-up' style='background-color: #EEEEEE;'>" +
            "<div onclick='"+onclickHtml+"' style='text-align: center;padding-top: 5px;'>"+tips+"</div><hr/>" +
            "<div onclick='layer.closeAll();' style='text-align: center;padding-top: 5px;'>取消</div><br/>" +
            "</div>";
        layer.open({
            title: ' ',
            type: 1,
            closeBtn: 0,
            content: openHtml
        });
    }
    /**********************   用户从群列表退群、管理员踢人、拉人入群 结束  ************************/


</script>


</body>
</html>
